<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>认识盒子模型</title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 50px;
				border: 15px solid red;
				padding: 30xp;
				margin: 20px;
				/* display: inline; 转换为行内元素 */
			}
		</style>
	</head>
	<body>
		<p class="box">盒子包含的内容</p>
		p标签是块级元素
		<!-- 行内元素不换行 -->
		<!-- 行内元素特征：(1)设置宽高无效
		
		　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
		
		　　　　　　　　　(3)不会自动进行换行
		块状元素特征：(1)能够识别宽高
		
		　　　　　　　　　(2)margin和padding的上下左右均对其有效
		
		　　　　　　　　　(3)可以自动换行
		
		　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下 -->
	</body>
</html>
